<template>
  <div>
    <!-- 新增dialog -->
    <el-dialog title="新增用户" :visible.sync="dialogAddFormVisible">
      <el-form :model="addData">
        <div class="top">
          <el-form-item label="用户名称" label-width="">
            <el-input
              v-model="addData.userName"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户角色"
            ><br />
            <el-select v-model="addData.roleName" placeholder="请选择用户角色">
              <el-option label="普通角色" value="普通角色"></el-option>
              <el-option label="访客" value="访客"></el-option>
              <el-option label="超级管理员" value="超级管理员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户密码" label-width="">
            <el-input v-model="addData.pwd" placeholder="请输入内容"></el-input>
          </el-form-item>

          <el-form-item label="上传头像" label-width="" style="width: 100%">
            <el-upload
              style="width: 200px"
              class="avatar-uploader"
              action="http://120.55.49.64:8080/FireEmergency/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-return"
          @click="dialogAddFormVisible = false"
          >取 消</el-button
        >
        <el-button icon="iconfont icon-save" @click="addDep">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑dialog -->
    <el-dialog title="编辑用户" :visible.sync="dialogEditFormVisible">
      <el-form :model="editData">
        <div class="top">
          <el-form-item label="用户名称" label-width="">
            <el-input
              v-model="editData.userName"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户角色"
            ><br />
            <el-select v-model="editData.roleName" placeholder="请选择用户角色">
              <el-option label="普通角色" value="普通角色"></el-option>
              <el-option label="访客" value="访客"></el-option>
              <el-option label="超级管理员" value="超级管理员"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户密码" label-width="">
            <el-input
              v-model="editData.pwd"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号状态" label-width="">
            <br />
            <el-select v-model="editData.status" placeholder="请选择用户角色">
              <el-option label="正常" value="1"></el-option>
              <el-option label="停用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="更换头像" label-width="" style="width: 100%">
            <el-upload
              style="width: 200px"
              class="avatar-uploader"
              action="http://120.55.49.64:8080/FireEmergency/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess1"
              :before-upload="beforeAvatarUpload1"
            >
              <img v-if="true" :src="editData.headPic" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-return"
          @click="dialogEditFormVisible = false"
          >取 消</el-button
        >
        <el-button icon="iconfont icon-save" @click="editDep">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除dialog -->
    <el-dialog
      title="删除提示"
      :visible.sync="dialogDelFormVisible"
      width="30%"
    >
      <div>
        <i class="el-icon-delete-solid" style="font-size: 40px"></i>
      </div>
      <h3 style="margin-top: 30px">确定要删除此用户吗？</h3>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-return"
          @click="dialogDelFormVisible = false"
          >取 消</el-button
        >
        <el-button icon="iconfont icon-save" @click="delDep">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 批量删除dialog -->
    <el-dialog
      title="批量删除提示"
      :visible.sync="dialogBatchDelFormVisible"
      width="30%"
    >
      <div>
        <i class="el-icon-delete-solid" style="font-size: 40px"></i>
      </div>
      <h3 style="margin-top: 30px">确定要删除这些用户吗？</h3>
      <div slot="footer" class="dialog-footer">
        <el-button
          icon="iconfont icon-return"
          @click="dialogBatchDelFormVisible = false"
          >取 消</el-button
        >
        <el-button icon="iconfont icon-save" @click="batchDelDep"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: {},
      imageUrl: null,
      //删除
      delId: null,
      //批量删除
      delIdArr: [],
      dialogAddFormVisible: false,
      dialogEditFormVisible: false,
      dialogDelFormVisible: false,
      dialogBatchDelFormVisible: false,
      addData: {
        pwd: "",
        roleName: "",
        userName: "",
        status: 1,
        headPic: "",
      },
      editData: {},
    };
  },
  methods: {
    //增加用户
    addDep() {
      this.$axios({
        url: "/user",
        method: "post",
        data: {
          pwd: this.addData.pwd,
          roleName: this.addData.roleName,
          userName: this.addData.userName,
          status: this.addData.status,
          headPic: this.imageUrl,
        },
      }).then((res) => {
        console.log("addData", res);
        if (res.data.code == 200) {
          this.$message.success("增加成功");
          this.$emit("render");
          this.dialogAddFormVisible = false;
        } else {
          this.$message.error("增加失败");
        }
      });
    },
    //修改用户
    editDep() {
      console.log("edit", this.editData);
      this.$axios({
        url: "/user",
        method: "put",
        data: {
          id: this.editData.id,
          pwd: this.editData.pwd,
          roleName: this.editData.roleName,
          userName: this.editData.userName,
          status: Number(this.editData.status),
          headPic: this.editData.headPic,
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.$emit("render");
          this.dialogEditFormVisible = false;
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    //删除用户
    delDep() {
      console.log(this.delId);
      this.$axios({
        url: `/users/${this.delId}`,
        method: "delete",
        data: this.delId,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("删除成功");
          this.$emit("render");
          this.dialogDelFormVisible = false;
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    //批量删除
    batchDelDep() {
      console.log(this.delIdArr);
      this.$axios({
        url: "/users",
        method: "delete",
        data: this.delIdArr,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message.success("批量删除成功");
          this.$emit("render");
          this.dialogBatchDelFormVisible = false;
        } else {
          this.$message.error("批量删除失败");
        }
      });
    },
    handleAvatarSuccess(res, file) {
      console.log(111, file.response.filePath);
      this.$emit("getImage", file.response.filePath);
      this.imageUrl = file.response.filePath;
      console.log(this.imageUrl, "子组件图片");
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess1(res, file) {
      console.log(111, file.response.filePath);
      this.$emit("getImage", file.response.filePath);
      this.editData.headPic = file.response.filePath;
    },
    beforeAvatarUpload1(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
/deep/.avatar-uploader {
  display: block;

  cursor: pointer;
  // position: relative;
  overflow: hidden;
}
/deep/.el-upload {
  border: 1px solid #ccc;
  border-radius: 6px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
// .dialog-footer{
// padding-right: 80px;
// }
.el-button {
  color: #0a92fa;
  &:hover {
    color: #fff;
    background: #0a92fa;
  }
}
/deep/.iconfont {
  position: relative;
  top: 2px;
  font-size: 18px;
  margin-right: 10px;
}
.el-select {
  display: block;
}
/deep/.el-form-item__label::before {
  content: "*";
  color: #ff0084;
}
p {
  border-bottom: 1px solid #ccc;
  width: 94%;
}
.el-form {
  padding: 20px;
  p {
    text-align: left;
    line-height: 50px;
    font-size: 1.2em;
  }
}
.top,
.bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.el-form-item {
  width: 44%;
  margin-right: 40px;
}
</style>